<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>修改话题</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="__ADMIN_STATIC__/css/oksub.css">
	<script type="text/javascript" src="__STATIC__/lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
		<div class="layui-form-item">
			<label class="layui-form-label">话题名称</label>
			<div class="layui-input-block">
				<input type="text" name="name" placeholder="请输入话题名字" autocomplete="off" class="layui-input"
				       lay-verify="required" value="{$model['name']}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">所属分类</label>
			<div class="layui-input-block">
				<select lay-verify="required" name="category_id">
					<option value="0"></option>
					{foreach $category as $k=>$v }
						<option {if $k == $model->category_id} selected="selected" {/if} value="{$k}">{$v}</option>
					{/foreach}
				</select>
			</div>
		</div>

        <div class="layui-form-item">
            <label  class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <div class="layui-upload" style="display: flex;">
                    <button type="button" class="layui-btn" id="topic_btn">上传图片</button>
                    <input value="{$model['image']}" readonly id="image_input"  lay-verify="required" class="layui-input" placeholder="话题图片" autocomplete="off" name="image">
                </div>
                <div class="layui-upload-list">
                    <img src="{$model.image_url}" width="145" height="145" class="layui-upload-img" id="topic_img">
                    <p id="topic_msg"></p>
                </div>
            </div>
        </div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">话题描述</label>
			<div class="layui-input-block">
				<textarea name="desc" placeholder="请输入话题描述" class="layui-textarea" lay-verify="required">{$model['desc']}</textarea>
			</div>
		</div>


		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="addArticle">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="__STATIC__/lib/layui/layui.js"></script>
<script>
	layui.use(["form", "okUtils", "okLayer", 'upload'], function () {
		let form = layui.form;
		let okUtils = layui.okUtils;
		let okLayer = layui.okLayer;
		let $ = layui.jquery;
		let upload = layui.upload;
		okLoading.close();
		form.on("submit(addArticle)", function (data) {
			okUtils.ajax("{:url('update',['id'=>$model->id])}", "post", data.field, true).done(function (response) {
				okLayer.greenTickMsg(response.msg, function () {
					parent.layer.close(parent.layer.getFrameIndex(window.name));
				});
			}).fail(function (error) {
				console.log(error)
			});
			return false;
		});

		//图片上传
		var uploadInst = upload.render({
			elem: '#topic_btn'
			,url: "{:url('uploadTopicImage')}"
			,field : 'topic_cover'
			,before: function(obj){
				//预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result){
					$('#topic_img').attr('src', result); //图片链接（base64）
				});
			}
			,done: function(res){
				//如果上传失败
				if(res.code > 0){
					return layer.msg('上传失败');
				}
				//上传成功
                $('#image_input').val(res.data['src']);
			}
			,error: function(){
				//演示失败状态，并实现重传
				var demoText = $('#topic_msg');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function(){
					uploadInst.upload();
				});
			}
		});


	});
</script>
</body>
</html>
